<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .box{
    position: relative;
    width: 200px;
    height: 25px;
    border: 1px solid #000000;
  }
  .box::after{
    content: '';
    height: 10px;
    width: 10px;
    position: absolute;
    top:4px;
    right: 8px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
    transition: all 0.6s ease;
  }
  .box:hover::after{
    transform: rotate(225deg);
    top: 10px;
  }
</style>
<body>
<div class="box"></div>
</body>
</html>
